<!--
 * @Author: modefy
 * @Date: 2023-05-04 16:59:01
 * @LastEditors: modefy
 * @LastEditTime: 2023-05-11 14:47:31
 * @Description: 四象限
-->
<template>
  <div class="modefy-quadrant">
    <div class="quadrant-title">四象限</div>
    <div class="column-arrow"></div>
    <div class="row-arrow"></div>
    <div class="content">
      <el-input @change='change()' :class="[`${item.field} q-content`]" v-for="item in quadrantTexts" :key="item.field"
        type="textarea" autosize :placeholder="item.placeholder" @blur="inputBlur" v-model="params[item.field]"></el-input>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import { getQuadrantListFn, submitQuadrantData } from '@/service/home/home'

const params = reactive({
  serious: '',
  important: '',
  urgent: '',
  unhurried: ''
})

const quadrantId = ref('')

function change() {
  this.$forceUpdate();  //强制刷新
}

const quadrantTexts = [
  {
    field: 'important',
    placeholder: '重要不紧急'
  },
  {
    field: 'serious',
    placeholder: '重要紧急'
  },
  {
    field: 'unhurried',
    placeholder: '不重要不紧急'
  },
  {
    field: 'urgent',
    placeholder: '紧急不重要'
  }
]

async function getInitData() {
  const { data: [result] } = await getQuadrantListFn()
  quadrantId.value = result.id
  Object.keys(result).map(item => {
    if (params[item] !== undefined) {
      params[item] = result[item]
    }
  })

}

const inputBlur = () => {
  let paramsData: any = { ...params }
  paramsData.id = quadrantId.value
  submitQuadrantData(paramsData)
}

onMounted(() => {
  getInitData()
})
</script>
<style lang="scss" scoped>
$m-color: #1E90FF;

.quadrant-title {
  color: $m-color;
  margin-left: 20px;
  width: 100px;
  font-weight: bold;
  position: relative;
  // top: -10px;
}

.modefy-quadrant {
  flex: 6;
  // margin-top: 28px;

  .content {
    width: 100%;

    .q-content {
      width: 48%;
      margin: 4px;

      :deep(.el-textarea__inner) {
        height: 160px !important;
      }

      :deep(.el-textarea__inner::placeholder) {
        color: #fff;
        text-align: center;
      }

    }

    .serious {
      :deep(.el-textarea__inner) {
        background-color: #ff855c !important;
        color: #fff;
      }
    }

    .important {
      :deep(.el-textarea__inner) {
        background-color: #fcc334 !important;
        color: #fff;
      }
    }

    .urgent {
      :deep(.el-textarea__inner) {
        background-color: #88b0fe !important;
        color: #fff;
      }
    }

    .unhurried {
      :deep(.el-textarea__inner) {
        background-color: #56d696 !important;
        color: #fff;
      }
    }

  }

  .row-arrow {
    width: 98%;
    height: 2px;
    background-color: $m-color;
    position: relative;
    top: 170px;

  }

  .column-arrow {
    width: 334px;
    height: 2px;
    background-color: $m-color;
    transform: rotate(90deg);
    position: relative;
    left: 370px;
    top: 166px;
  }

  .column-arrow::before {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    left: -8px;
    top: -5px;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    // border-left: 12px solid #000;
    border-right: 10px solid $m-color;
  }

  .row-arrow::after {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    right: -8px;
    top: -5px;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 10px solid $m-color;
  }
}
</style>